<template>
	<view class="capital-pool">
		<view class="capital-pool-contain">
			<u-form :model="form" ref="uForm">
				<!-- <u-form-item label="代理商编号" prop="agentNo" label-width="200"><u-input v-model="form.agentNo"
						placeholder="请输入代理商编号" /></u-form-item> -->
				<u-form-item label="金额" prop="amount" label-width="200"><u-input v-model="form.amount"
						placeholder="请输入金额" type="number" @input="getFee()" /></u-form-item>
				<u-form-item label="转出账户" prop="walletType" label-width="200">
					<u-input v-model="walletTypeName" disabled disabledColor="#ffffff" placeholder="请选择转出账户"></u-input>
					<u-icon slot="right" name="arrow-right" @click="capitalShow = true;"></u-icon>
				</u-form-item>
			</u-form>
			<u-select v-model="capitalShow" :list="capitalPoolWalletType" value-name="walletType"
				label-name="walletName" title="转出账户" @close="capitalShow = false" @confirm="capitalPoolSelect">
			</u-select>
			<div class="bottom-item-number">
				手续费：
				<span class="red">{{ toFixedNum2(feeTotalNum) }}</span>
				<span class="gray">({{ toFixedNum2(fee) }}+{{ addFee }}元/笔)</span>
			</div>
		</view>
		<view class="capital-pool-button">
			<u-button hover-class="none" type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		walletMoveToCash
	} from "_a/earnings/index";
	export default {
		data() {
			return {
				form: {
					// agentNo: '',
					amount: '',
					walletType: '',
				},
				capitalPoolWalletType: [
					// {
					// 	name: '分润账户',
					// 	value: 0
					// },
					// {
					// 	name: '服务费账户',
					// 	value: 2
					// },
					// {
					// 	name: '激活返现账户',
					// 	value: 5
					// },
				],
				capitalShow: false,
				rules: {
					// agentNo: [{
					// 	required: true,
					// 	message: "请输入代理商编号",
					// 	trigger: ['change', 'red'],
					// }, ],
					amount: [{
						required: true,
						message: "请输入金额",
						trigger: ['change', 'red'],
					}],
					walletType: [{
						required: true,
						message: "请选择账户类型",
						// trigger: ['change', 'red'],
					}, ],
				},
				walletTypeName: '',
				withdrawRate: [],
				feeTotalNum: 0, //总手续费
				fee: 0, // //提现手续费
				addFee: 0, //每笔提现手续费
			};

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			// this.list = this.$store.getters.userInfo.wallet;
			this.$store.dispatch("getUserDetail").then((res) => {
				this.withdrawRate = res.withdrawRate;
				this.capitalPoolWalletType = res.wallet.filter(item => item.status == 1 && item.walletType != 6);
			});
		},
		methods: {
			capitalPoolSelect(e) {
				this.walletTypeName = e[0].label;
				this.form.walletType = e[0].value;
				this.capitalShow = false;
				this.getFee();
				this.$forceUpdate()
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						walletMoveToCash(this.form).then(res => {
							if (res.code == 200) {
								this.$tip
									.modal({
										content: '转入成功!',
										showCancel: false
									})
									.then(res => {
										this.$nav.goBack();
									});
							}
						})
					}
				});
			},
			getFee() {
				let item = this.withdrawRate.find(item => item.walletType == this.form.walletType);
				if (item) {
					this.feeTotalNum = this.form.amount * (item.rate / 100) + item.addFee;
					this.fee = this.form.amount * (item.rate / 100);
					this.addFee = item.addFee;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		// background-color: #ffffff;
	}

	.capital-pool {
		padding: R(30px);
		background-color: #ffffff;
		border-radius: R(30px);
		margin: R(30px);

		&-button {
			margin-top: R(50px);
		}

		.bottom-item-number {
			margin: R(30px) 0;
			font-size: R(28);

			.red {
				color: red;
				font-size: R(34);
			}

			.gray {
				color: #999;
			}
		}
	}
</style>